<template>
    <div>
      <div class="header">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
            <div slot="right">
              <van-icon name="star-o" class="icon"  v-if="userShopScore.collected===0||userShopScore.collected===null" @click="starClick(1)"/>
              <van-icon name="star" class="icon"  v-if="userShopScore.collected===1" @click="starClick(0)"/>
              <van-icon name="share-o" class="icon" />
            </div>
        </van-nav-bar>
      </div>

      <div class="shop">
        <div class="shopImg">
          <van-image
            width="94%"
            height="150"
            fit="fill"
            radius = "10"
            :src="shopVo.iconUrl"
          />
        </div>
        <div class="content">
          <h2>{{shopVo.name}}</h2>
          <div class="price">
            <van-rate :value="shopVo.remarkScore" size="13" readonly />
            <span class="shopRemarkScore">{{shopVo.remarkScore}}</span>
            <span class="shopPersonPrice">￥{{shopVo.pricePerMan}}/人</span>
          </div>
          <div class="tags">
            <span>{{shopVo.tags}}</span>
          </div>
          <div class="tags">
            营业时间：<span>{{shopVo.startTime}}-{{shopVo.endTime}}</span>
          </div>
          <div class="position">
            <span>{{shopVo.address}}</span>
            <span style="float: right">{{shopVo.distance}}</span>
          </div>
        </div>

      </div>


      <div v-for="item in shopVo.goodsList" class="goods">
        <van-card
          tag="Hot"
          :price="item.price"
          :desc="item.description"
          :title="item.goodName"
          :thumb="item.iconUrl"
          @click="toGoodsDetail(item.id)"
        >
          <div slot="footer">
            <van-button size="mini">购买</van-button>
          </div>
        </van-card>
      </div>
    </div>
</template>

<script>
    import { getShopDetailById } from "@/api/shop";
    import { updateUserShopScore,getUserShopScore } from "@/api/search";
    import loadBMap  from '@/utils/loadBMap';
    import { mFormat }  from '@/utils/distance';
    import { getUrl } from  '@/api/file'
    import { Toast } from 'vant';
    import store from '@/store'
    export default {
        name: "index",
        data() {
          return {
            shopVo: {
              iconUrl:''
            },
            location:null,
            userShopScore:{
              collected: 0
            },
          }
        },
        async mounted() {
          await loadBMap('RQTV2Ci6MwTSFUqaUwzheWsErrzljY5G')
          this.getShopDetailByIdRequest();
          this.userBehavior();
        },
        methods:{
          getShopDetailByIdRequest(){
            getShopDetailById({"id":this.$route.query.shopId}).then((response) => {
              this.shopVo = response.data;
              this.locationIndex();
              getUrl(this.shopVo.iconUrl).then((response) => {
                this.shopVo.iconUrl = response.data;
              });
              this.shopVo.goodsList.forEach((goods=>{
                getUrl(goods.iconUrl).then((response) => {
                  goods.iconUrl = response.data;
                })
              }))
            });
          },
          userBehavior(){
            if(store.getters.name){
              getUserShopScore(this.$route.query.shopId).then((response) => {
                if(response.data){
                  this.userShopScore = response.data;
                }
              });
              updateUserShopScore({"shopId":this.$route.query.shopId,"visited":1}).then((response) => {
              });
            }
          },
          locationIndex(){
            if (sessionStorage.getItem('location')){
              this.location =JSON.parse(sessionStorage.getItem('location'));
              let map = new BMap.Map("container");
              let point1 = new BMap.Point(this.location.longitude,this.location.latitude);
              let point2 = new BMap.Point(this.shopVo.longitude,this.shopVo.latitude);
              let distance = map.getDistance(point1,point2);
              this.shopVo.distance = mFormat(distance);
            }else{
              Toast("无法获取当前位置!");
            }
          },
          onClickLeft(){
            this.$router.go(-1)
          },
          toGoodsDetail(id){
            this.$router.push({
              name: 'Goods',
              query: {
                goodsId: id,
              }
            });
          },
          starClick(collected){
            if (store.getters.name){
              updateUserShopScore({"shopId":this.$route.query.shopId,"collected":collected}).then((response) => {
                getUserShopScore(this.$route.query.shopId).then((response) => {
                  if(response.data){
                    this.userShopScore = response.data;
                  }
                });
              });
            }else{
              Toast("请先登录!");
            }
          }
        }
    }
</script>

<style scoped>
  .icon{
    margin-right: 8px;
  }
  .shop>.shopImg{
    text-align: center;
  }
  .shop>.content{
    margin: 10px;
    font-size: 13px;
  }
  .shop>.content>div{
    margin-top: 10px;
  }

  .shopRemarkScore{
    color: brown;
    margin-left: 5px;
  }
  .shopPersonPrice{
    margin-left: 10px;
  }

  .goods{
    margin-top: 10px;
  }
</style>
